import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import { Form } from 'antd'
import ClaimListBlock from './ClaimListBlock'
import { ClaimContext, changeClaimItemFeeConfig, removeClaimItemFeeConfing, initData, formatClaim, computeClaimFee } from './context'
import { Line, Cell } from '@components/ApprovePre/Approve'
import FeeList from './FeeList'
const { Item } = Form
// const { Option } = Select
function Main ({ formRef, label, name, claim, originClaim, children }) {
  const [claimItemConfig, setClaimItemConfig] = useState([])
  const [claimItemFeeConfig, setClaimItemFeeConfig] = useState([])
  const context = {
    claimItemConfig,
    claimItemFeeConfig,
    setClaimItemFeeConfig,
    changeClaimItemFeeConfig: changeClaimItemFeeConfig.bind(this, formRef, name, (d) => setClaimItemFeeConfig(d), () => computeClaimFee(formRef, name, originClaim)),
    removeClaimItemFeeConfing,
    computeClaimFee: computeClaimFee.bind(this, formRef, name, originClaim)
  }
  useEffect(() => {
    initData((d) => setClaimItemConfig(d.claimItemConfig))
  }, [formRef])
  useEffect(() => {
    if (claimItemConfig.length !== 0) {
      formatClaim(claimItemConfig, claim, originClaim, formRef, name, setClaimItemFeeConfig)
    }
  }, [claim, claimItemConfig, formRef, name, originClaim])
  useEffect(() => {
    if (formRef.current) {
      context.computeClaimFee(formRef, name, originClaim)
    }
  }, [context, formRef, name, originClaim])
  return (
    <ClaimContext.Provider value={context}>
      <Line>
        <Item name={[name, 'fee_type']} noStyle><span /></Item>
        {/* <Cell>
          <Item labelCol={{ flex: '120px' }} name={[name, 'fee_type']} label='计费方式' rules={[{ required: true, message: '计费方式不能为空' }]}>
            <Select placeholder='请选择收费方式' onChange={v => computeClaimFee(formRef, name, originClaim)}>
              <Option key='普通收费'>普通收费</Option>
              <Option key='特殊收费'>特殊收费</Option>
              <Option key='金融收费附录一'>金融收费附录一</Option>
              <Option key='金融收费附录二'>金融收费附录二</Option>
            </Select>
          </Item>
        </Cell>
        <Split /> */}
        {children}
      </Line>
      <Line>
        <Cell style={{ width: '65%' }}>
          <ClaimListBlock label={label} name={name} visible />
        </Cell>
      </Line>
      <FeeList originClaim={originClaim} name={name} claim={claim} formRef={formRef} />
    </ClaimContext.Provider>
  )
}

Main.propTypes = {
  formRef: PropTypes.object,
  label: PropTypes.string,
  name: PropTypes.string,
  claim: PropTypes.object,
  originClaim: PropTypes.object
}
Main.defaultProps = {
  formRef: {},
  label: '',
  name: '',
  claim: undefined,
  originClaim: undefined
}

export default Main
